<template>
  <div class="edit-box">
    <el-form ref="ruleForm" 
     :rules="rules"
    :model="form" 
    label-width="120px">
      <div class="boxItem">
        <div class="title">基础信息</div>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="服务名称" prop="serverName">
              <el-input v-model="form.serverName" class="formItem"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品是否热门"  prop="hot">
              <el-select
                v-model="form.hot"
                placeholder="是否热门"
                class="formItem"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务说明" prop="serverInstruction">
              <el-input
                v-model="form.serverInstruction"
                class="formItem"
                placeholder="请输入服务说明"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="价格" prop="price">
              <el-input
                v-model="form.price"
                class="formItem"
                placeholder="请输入价格"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="亮点标签" prop="tag1">
              <el-input
                v-model="form.tag1"
                class="formItem"
                style="margin-bottom: 10px"
                placeholder="亮点标签一"
              ></el-input>
              <el-input
                v-model="form.tag2"
                class="formItem"
                placeholder="亮点标签二"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="boxItem">
        <div class="title">图文描述</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="封面图" prop="image">
              <Upload @uploadHandle="uploadHandle" :defaultImg="form.image" theme='image' v-if="ImgForm.image"/>
              
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="标题主题" prop="detailImage">
              <Upload @uploadHandle="uploadHandle"  :defaultImg="form.detailImage"   theme='detailImage' v-if="ImgForm.detailImage"/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="boxItem">
        <div class="title">发布设置</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发布" prop="status">
              <el-radio-group
                v-model="form.status"
                @change="changePubType"
                class="groupRadio"
              >
                <div>
                  <el-radio :label="2">立即发布</el-radio>
                </div>
                <div>
                  <el-radio :label="1">
                    <span style="margin-right:15px">定时发布</span>
                    <span>
                      <el-date-picker
                        v-model="form.publishTime"
                        type="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        :disabled="form.status == 2? true: false"
                      >
                      </el-date-picker>
                    </span>
                  </el-radio>
                </div>
                <div>
                  <el-radio :label="0">暂不发布</el-radio>
                </div>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="boxItem">
         <div class="button-action">
           <el-button style="margin-right:15px" @click="cancelHandle">
             取消
           </el-button>
           <el-button  type="primary"  @click="submitForm('ruleForm')">
             确定
           </el-button>
         </div>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Form } from "element-ui";
import Upload from "../../components/upLoad.vue";
import {
  defaultProductData,
  
} from "@/APIService/api/backstage/service"

import serviceApi from "@/APIService/api/backstage/service"

@Component({
  name: "productDetail",
  components: {
    Upload,
  },
})
export default class extends Vue {
  private publishTime: string = "";
  private serviceId: number | string = ""
  private form = Object.assign({}, defaultProductData);
  private ImgForm = {}

  private radio: number | string = 3;
    // rule
  private rules = {
    serverName: [ { required: true, message: '请输入商品名称', trigger: 'blur' }],
    hot: [{required:true, message:'请选择是否热门'}],
    serverInstruction: [{required:true,message:'请输入商品说明'}],
    price:[{required:true,message:'价格'}],
    tag1:[{required:true,message:'请输入标签一或者标签二'}],
    image:[{required:true,message:'请上传图片'}],
    detailImage:[{required:true,message:'请上传详情图'}],
    status:[{required:true,message:'请选择发布状态'}]
  }

  private uploadHandle(payload) {
    console.log(payload)
     this.ImgForm[payload.theme] = JSON.stringify(payload.fileList)
    if(payload.fileList.length>0){
         
         this.form[payload.theme] = JSON.stringify(payload.fileList)
        // this.$refs['ruleForm'].clearValidate(payload.theme)
        const _form = this.$refs['ruleForm'] as Form
         _form.clearValidate(payload.theme)
    }else{
      this.form[payload.theme] = ""
    }
   
    // todo 删除该校验
  }
  private changePubType(e: any) {
    console.log(e);
    if(e != 1) {
      this.form.publishTime = null
    }
  }

  // mounted()
  private mounted() {
     this.serviceId = this.$route.params.id
     console.log(this.serviceId)
     if(this.serviceId){
       this.getDetail()
     }
     
  }
  private async getDetail () {
     let res = await serviceApi.getServiceDetail(this.serviceId)
     if (res.code === 20000) {
       this.form = Object.assign({},res.data)
       this.ImgForm['image'] = this.form.image
       this.ImgForm['detailImage'] = this.form.detailImage
     }


  }
  //提交
  private submitForm(ruleForm:string) {
   
    (this.$refs.ruleForm as Form).validate(valid => {
      if(valid) {
        console.log('success')
        console.log(this.form)
      }else{
        console.error('Submit Error')
        console.log(this.form)
        return false 
      }

    })
  }

  // 取消
  private cancelHandle () {
    this.$router.push('/product/index')
  }
}
</script>
<style lang="less" scoped>
.edit-box {
  background: #fff;
  padding: 20px;
}
.boxItem {
  .title {
    height: 40px;
    line-height: 40px;
    background: #f6fbff;
    padding: 0 20px;
    margin: 20px 0;
  }
  .formItem {
    width: 70%;
  }
  .groupRadio {
    div {
      margin: 15px 0;
    }
  }

  .button-action {
    display: flex;
    justify-content: center;
  }
}
</style>
